import Taro, {Component} from '@tarojs/taro'
import { AtCard,AtSwipeAction ,AtList, AtListItem  } from 'taro-ui'
import {View} from "@tarojs/components"
import {showErrorMsg,showModal,navigateWithAuth} from '../../../utils/index'
import {getClassByClassKey} from '../../../service/index'
import {getGlobalData} from "../../../global.d";
import './index.scss'
import {updateClassAdmin,updateClassStudent,deleteUserClass,changeUserType} from "./service";

export default class Index extends Component {
  config = {
    navigationBarTitleText:'成员管理'
  }
    constructor(props) {
        super(props);
        this.state = {
            user:{},
          targetClass:{
            classAdmins:[],
            classStudents:[]
          }
        }
    }
    componentDidMount() {
      this.getClass()
    }
    async getClass(){
      let user = getGlobalData('user')
      let targetClass = await getClassByClassKey(user.userLastTimeClass.classKey)
      console.log(targetClass)
      this.setState({
        targetClass
      })
    }

   async clickClassAdmins(option,index) {
     let {targetClass} = this.state
     let targetUserId = targetClass.classAdmins[index]._id
     if (option.text === '移除') {
       if (await showModal('⚠注意', '确认要移除该同学吗❓')) {
         targetClass.classAdmins.splice(index, 1)
         await updateClassAdmin(targetClass._id, targetClass.classAdmins)
         this.setState({
           targetClass
         })
         await deleteUserClass(targetUserId, targetClass.classKey)
       } else {
         targetClass.classStudents.unshift(targetClass.classAdmins[index])
         targetClass.classAdmins.splice(index, 1)
         await updateClassAdmin(targetClass._id, targetClass.classAdmins)
         await updateClassStudent(targetClass._id, targetClass.classStudents)
         this.setState({
           targetClass
         })
         await  changeUserType(targetUserId, targetClass.classKey, 'user')
       }
     }
   }
    async clickUserList(option,index ) {
      let {targetClass} = this.state
      let targetUserId = targetClass.classStudents[index]._id
      if (option.text === '移除') {
        if (await showModal('⚠注意', '确认要移除该同学吗❓')) {
          targetClass.classStudents.splice(index, 1)
          await updateClassStudent(targetClass._id, targetClass.classStudents)
          this.setState({
            targetClass
          })
          await deleteUserClass(targetUserId, targetClass.classKey)
        }
      }else {
        targetClass.classAdmins.push(targetClass.classStudents[index])
        targetClass.classStudents.splice(index, 1)
        await updateClassAdmin(targetClass._id, targetClass.classAdmins)
        await updateClassStudent(targetClass._id, targetClass.classStudents)
        this.setState({
          targetClass
        })
        await  changeUserType(targetUserId, targetClass.classKey, 'admin')
      }
    }

  render() {
      const optionForUser = [{
        text: '设为管理员',
        style: {
          backgroundColor: '#6190E8'
        }
      },{
        text: '移除',
        style: {
          backgroundColor: '#FF4949'
        } }]
      const optionForAdmin = [{
        text: '取消管理员',
        style: {
          backgroundColor: '#6190E8'
        }
      },{
        text: '移除',
        style: {
          backgroundColor: '#FF4949'
        } }
      ]
    const {classStudents,classAdmins} = this.state.targetClass
    //管理员列表
    const adminList = classAdmins.map((item, index) => {
      return (
        <AtSwipeAction
          key={index}
          options={optionForAdmin}
          isOpened={index === 0}
          onClick={this.clickClassAdmins.bind(this)}
          autoClose={true}
        >
          <AtListItem title={item.userDetail.userRealName||'该用户暂未设置'}/>
        </AtSwipeAction>
      )
    })
    //学生列表
    const userList = classStudents.map((item, index) => {
      return (
        <AtSwipeAction
          key={index}
          options={optionForUser}
          isOpened={index === 0}
          onClick={this.clickUserList.bind(this)}
          autoClose={true}
        >
          <AtListItem title={item.userDetail.userRealName||'该用户暂未设置'}/>
        </AtSwipeAction>
      )
    })
        return (
            <View>
              <AtCard
                title='管理员'
              >
                <AtList>
                  {adminList}
                </AtList>
              </AtCard>

              <AtCard
                title='其他同学'
              >
                <AtList>
                  {userList}
                </AtList>
              </AtCard>
            </View>
        )
    }

}
